@import "./var";
@import "./mixin";
@import "./border-1px";

/*btn按钮样式*/

@mixin btn-normal($width) {
    @if $width<=260 {
        height: rem(64);
        line-height: rem(64);
        font-size: $fs_28;
    }
    @else {
        height: rem(88);
        line-height: rem(88);
        font-size: $fs_32;
    }
    display: inline-block;
    position: relative;
    width: rem($width);
    text-align: center;
    margin: 0 auto;
    color: $c_white;
    border-radius: rem(80);
    background: linear-gradient(90deg, $bg_linear_left, $bg_linear_right);
    box-shadow: 0 rem(2) rem(4) $bs_btn_rgba;
    &.disabled:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: $bg_white;
        opacity: .5;
        border-radius: rem(80);
    }
}

@mixin btn-white($width: 200) {
    display: inline-block;
    position: relative;
    width: rem($width);
    height: rem(60);
    line-height: rem(60);
    margin: 0 auto;
    color: $c_dark;
    font-size: $fs_28;
    text-align: center;
    border-radius: rem(80);
    background: $bg_white;
    box-shadow: 0 rem(3) rem(8) $bs_white_rgba;
    // @include border-1px($bd_button, all, solid, rem(80));
    border: rem(3) solid $bd_button;
    &.disabled:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: $bg_white;
        opacity: .5;
        border-radius: rem(80);
    }
}


/*layer遮罩层*/

@mixin layer-mask($bg_color: transparent, $opacity: .6) {
    &::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: $bg_color;
        opacity: $opacity;
        z-index: -1;
    }
}

@mixin layer-box-shadow() {
    box-shadow: 0 rem(2) rem(4) $bs_dialog;
}


/* 多行加省略号 */

@mixin line-clamp($line) {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
}


/* 单行加省略号 */

@mixin single-line-clamp() {
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
}